<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style type="text/css">
    ul,
    li {
        margin: 0;
        padding: 0
    }

    #scrollDiv {
        width: 300px;
        height: 25px;
        line-height: 25px;
        border: #ccc 1px solid;
        overflow: hidden
    }

    #scrollDiv li {
        height: 25px;
        padding-left: 10px;
    }
    </style>
    <script src="js/zepto.min.js" type="text/javascript"></script>
    <script src="js/fx.js" type="text/javascript"></script>
    <script type="text/javascript">
    /*function AutoScroll(obj){   
    $(obj).find("ul:first-child").animate({   
    marginTop:"-25px"   
    },500,function(){   
    $(this).css({marginTop:"0px"}).find("li:first-child").appendTo(this);   
    });   
    }   
    $(document).ready(function(){   
    setInterval('AutoScroll("#scrollDiv")',2000)   
    });   */
    $(document).ready(function(){ 
    $("#button").click(function() { 
    	var div = $("#div");
        div.animate({ display: 'block', opacity: '0.4' }, 'slow');
        // div.animate({ width: '300px', opacity: '0.8' }, "slow");
        // div.animate({ height: '100px', opacity: '0.4' }, "slow");
        // div.animate({ width: '100px', opacity: '0.8' }, "slow"); 
    });
})
    </script>
</head>

<body>
    <button id="button">click</button>
    <div id="div" style="background: #999;height: 200px;display: none;transition: all .3s linear;"></div>
    <!-- <div id="scrollDiv">   
<ul>   
<li>百度 www.baidu.com</li>   
<li>破洛洛 www.poluoluo.com</li>   
<li>这是公告标题的第三行</li>   
<li>这是公告标题的第四行</li>   
<li>这是公告标题的第五行</li>   
<li>这是公告标题的第六行</li>   
<li>这是公告标题的第七行</li>   
<li>这是公告标题的第八行</li>   
</ul>   
</div>    -->
<img src="">
</body>

</html>